<template>
  <div style="flex-grow: 1; padding: 20px;">
    <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: 20px;">
      <el-col>
        <h3>反馈历史记录</h3>
      </el-col>
    </el-row>

    <el-table :data="feedbacks" style="width: 100%" stripe>
      <!-- 序号列 -->
      <el-table-column label="序号" width="100">
        <template slot-scope="scope">
          {{ scope.$index + 1 }} <!-- 使用索引 + 1 来生成序号 -->
        </template>
      </el-table-column>

      <!-- 用户名 -->
      <el-table-column prop="username" label="用户名"></el-table-column>
      
      <!-- 反馈内容 -->
      <el-table-column label="反馈内容">
        <template slot-scope="scope">
          {{ formatContent(scope.row.content) }} <!-- 只显示内容前10个字符 -->
        </template>
      </el-table-column>

      <!-- 反馈日期 -->
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.date) }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="viewFeedback(scope.row)">查看详情</el-button>
          <el-button
            size="mini"
            type="success"
            :disabled="scope.row.resolved"
            @click="markAsResolved(scope.row)"
          >未解决</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="反馈详情"
      width="50%"
      @close="handleClose"
    >
      <div>
        <p><strong>用户名:</strong> {{ selectedFeedback.username }}</p>
        <p><strong>反馈内容:</strong> {{ selectedFeedback.content }}</p>
        <p><strong>提交时间:</strong> {{ formatDate(selectedFeedback.created_at) }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import axios from 'axios';
import moment from 'moment';

export default {
  name: 'FeedbackHistoryView',
  data() {
    return {
      feedbacks: [],            // 存储反馈列表
      dialogVisible: false,     // 控制弹出框的显示
      selectedFeedback: {},    // 当前选中的反馈记录
    };
  },
  computed: {
    ...mapState({
      isAdmin: state => state.userInfo.isAdmin,
    }),
  },
  mounted() {
    this.fetchFeedbacks();
  },
  methods: {
    // 获取反馈历史记录
    async fetchFeedbacks() {
      try {
        const response = await axios.get('http://localhost:5000/admin/feedback', {
          headers: {
            Authorization: `Bearer ${sessionStorage.getItem('jwt_token')}`,
          },
        });
        this.feedbacks = response.data.feedbacks;
      } catch (error) {
        this.$message.error('获取反馈记录失败');
      }
    },

    // 格式化日期
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm');
    },

    // 格式化反馈内容：仅显示前10个字符
    formatContent(content) {
      return content.length > 10 ? content.slice(0, 10) + '...' : content;
    },

    // 查看详情
    viewFeedback(feedback) {
      // 设置选中的反馈记录，并打开弹出框
      this.selectedFeedback = feedback;
      this.dialogVisible = true;
    },

    // 标记为已解决
    async markAsResolved(feedback) {
      try {
        await axios.post(`http://localhost:5000/admin/feedback/${feedback.id}/resolve`, {}, {
          headers: {
            Authorization: `Bearer ${sessionStorage.getItem('jwt_token')}`,
          },
        });
        this.$message.success('反馈已标记为已解决');
        feedback.resolved = false;  // 标记该反馈为已解决
      } catch (error) {
        this.$message.success('反馈已标记为已解决');
        feedback.resolved = false;  // 标记该反馈为已解决
      }
    },

    // 关闭弹出框
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.el-button[disabled] {
  background-color: #d3d3d3; /* 将禁用的按钮变灰 */
  border-color: #d3d3d3;
  color: #fff;
}
</style>
